JavaScript Module Federation Plugin Architektúra: Dinamikus Plugin Rendszer Építése

A mai komplex webfejlesztési környezetben kulcsfontosságú a moduláris, skálázható és karbantartható alkalmazások építése. Ennek elérésére egy hatékony technika a plugin architektúra, ahol a funkcionalitást független, dinamikusan betöltött modulokra bontjuk. A JavaScript Module Federation, a Webpack 5 egyik funkciója, robusztus mechanizmust biztosít az ilyen architektúrák megvalósításához. Ez a cikk a Module Federation használatának részleteibe mélyed el egy dinamikus plugin rendszer kiépítéséhez.

Mi az a Module Federation?

A Module Federation lehetővé teszi a JavaScript alkalmazások számára, hogy futásidőben dinamikusan osszanak meg kódot. Ez azt jelenti, hogy egy modul (egy kódrészlet) az egyik alkalmazásból közvetlenül felhasználható egy másik alkalmazás által, anélkül, hogy újra kellene építeni vagy telepíteni. Ezt a modulok különböző buildeken és akár különböző telepítéseken keresztüli elérhetővé tételével és felhasználásával érik el.

A hagyományos kódmegosztási módszerek, mint például az npm csomagok, megkövetelik a felhasználó alkalmazások újraépítését és újratelepítését, amikor egy megosztott függőség frissül. A Module Federation kiküszöböli ezt a többletterhet, így ideális olyan helyzetekben, ahol gyakori frissítésekre és független telepítésekre van szükség.

Miért használjunk Module Federationt Plugin Architektúrákhoz?

A Module Federation számos előnnyel jár a plugin architektúrák építése során:

• Dinamikus Modulbetöltés: A pluginek futásidőben betölthetők és eltávolíthatók, lehetővé téve az alkalmazások számára, hogy teljes újratelepítés nélkül alkalmazkodjanak a változó követelményekhez.
• Csatolásmentesítés: A pluginek egymástól függetlenül fejleszthetők és telepíthetők, csökkentve az alkalmazás különböző részei közötti függőségeket.
• Skálázhatóság: Az alkalmazás könnyen bővíthető új pluginekkel a meglévő funkcionalitás befolyásolása nélkül.
• Karbantarthatóság: A pluginek egymástól függetlenül frissíthetők és karbantarthatók, csökkentve a hibák bevezetésének kockázatát a központi alkalmazásba.
• Kód Újrafelhasználás: A pluginek több alkalmazásban is újra felhasználhatók, elősegítve a következetességet és csökkentve a fejlesztési ráfordítást.
• Verziókezelés és Visszaállítás: Kezelheti a pluginek különböző verzióit, és szükség esetén könnyen visszaállhat a korábbi verziókra.

Alapfogalmak: Host és Remote Konténerek

A Module Federation két kulcsfogalom köré épül:

• Host Konténer: A fő alkalmazás, amely a távoli modulokat (plugineket) használja.
• Remote Konténer: Az az alkalmazás, amely a host által felhasználható modulokat (plugineket) teszi elérhetővé.

A host konténer dinamikusan lekéri a remote konténerből a távoli belépési fájlt (remote entry file), amely tartalmazza az elérhetővé tett modulok jegyzékét. A host ezután hozzáférhet és használhatja ezeket a modulokat, mintha azok a saját kódjának részei lennének.

Dinamikus Plugin Rendszer Implementálása Module Federationnel: Lépésről Lépésre Útmutató

Nézzük végig egy egyszerű plugin rendszer felépítésének folyamatát a Module Federation használatával. Létrehozunk egy host alkalmazást és egy távoli plugin alkalmazást.

1. A Host Alkalmazás (Host Konténer) Beállítása

Először hozzon létre egy új projektkönyvtárat, és inicializáljon egy új npm projektet:

            mkdir host-app
cd host-app
npm init -y
            

              
                Copy
              
            
          

Telepítse a Webpacket és annak függőségeit:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Hozzon létre egy `webpack.config.js` fájlt a `host-app` könyvtárban a következő konfigurációval:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3000,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Host',
      remotes: {
        'plugin': 'Plugin@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

Magyarázat:

• `name`: A host alkalmazás neve.
• `remotes`: Meghatározza azokat a távoli konténereket, amelyeket a host használni fog. Ebben az esetben egy `plugin` nevű távoli konténert használ a `http://localhost:3001/remoteEntry.js` címről. A `Plugin@` szintaxis azt jelenti, hogy a távoli ModuleFederationPlugin `name` tulajdonsága 'Plugin'.
• `shared`: Felsorolja a host és a remote konténerek között megosztott függőségeket. Ez megakadályozza ezen függőségek többszörös betöltését. A `shared` használata kritikus a hibák elkerülése és a megfelelő plugin funkcionalitás biztosítása érdekében.

Hozzon létre egy `src` könyvtárat, és adjon hozzá egy `index.js` fájlt a következő tartalommal:

            import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';

const PluginComponent = React.lazy(() => import('plugin/PluginComponent'));

const App = () => {
  return (
    <div>
      <h1>Host Application</h1>
      <Suspense fallback={<div>Loading Plugin...</div>}>
        <PluginComponent />
      </Suspense>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

            

              
                Copy
              
            
          

Magyarázat:

• A `React.lazy` segítségével dinamikusan importáljuk a `PluginComponent`-et a `plugin` remote-ból. Ez elengedhetetlen a plugin lusta betöltéséhez és a kezdeti betöltési késedelmek elkerüléséhez.
• A `Suspense` komponenst a betöltési állapot kezelésére használjuk, amíg a plugint lekéri a rendszer.

Hozzon létre egy `public` könyvtárat, és adjon hozzá egy `index.html` fájlt a következő tartalommal:

            <!DOCTYPE html>
<html>
<head>
  <title>Host Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Adjon hozzá egy Babel konfigurációs fájlt, `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

Frissítse a `package.json` fájlt egy start szkripttel:

            {
  "name": "host-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
            

              
                Copy
              
            
          

2. A Remote Alkalmazás (Plugin Konténer) Beállítása

Hozzon létre egy új projektkönyvtárat a plugin számára:

            mkdir plugin-app
cd plugin-app
npm init -y
            

              
                Copy
              
            
          

Telepítse a Webpacket és annak függőségeit:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Hozzon létre egy `webpack.config.js` fájlt a `plugin-app` könyvtárban a következő konfigurációval:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3001,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Plugin',
      filename: 'remoteEntry.js',
      exposes: {
        './PluginComponent': './src/PluginComponent',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

Magyarázat:

• `name`: A remote konténer (plugin) neve. Ennek **meg kell** egyeznie a host `remotes` konfigurációjában használt névvel.
• `filename`: A remote entry fájl neve, amelyet a host lekér.
• `exposes`: Meghatározza azokat a modulokat, amelyeket a remote konténer elérhetővé tesz. Ebben az esetben a `PluginComponent` modult tesszük elérhetővé. A './PluginComponent' kulcsot használjuk a host import utasításában (pl. `import('plugin/PluginComponent')`).
• `shared`: Ugyanaz, mint a host esetében, felsorolja a megosztott függőségeket. Létfontosságú, hogy a megosztott függőségek és azok verziói kompatibilisek legyenek a host és a remote között.

Hozzon létre egy `src` könyvtárat, és adjon hozzá egy `PluginComponent.jsx` fájlt a következő tartalommal:

            import React from 'react';

const PluginComponent = () => {
  return (
    <div style={{border: '1px solid blue', padding: '10px'}}>
      <h2>Plugin Component</h2>
      <p>This is a dynamically loaded plugin!</p>
    </div>
  );
};

export default PluginComponent;

            

              
                Copy
              
            
          

Hozzon létre egy `index.js` fájlt a `src` könyvtárban a PluginComponent exportálásához:

            import PluginComponent from './PluginComponent';

export default PluginComponent;
            

              
                Copy
              
            
          

Hozzon létre egy `public` könyvtárat, és adjon hozzá egy `index.html` fájlt a következő tartalommal:

            <!DOCTYPE html>
<html>
<head>
  <title>Plugin Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Adjon hozzá egy Babel konfigurációs fájlt, `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

Frissítse a `package.json` fájlt egy start szkripttel:

            {
  "name": "plugin-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
            

              
                Copy
              
            
          

3. Az Alkalmazások Futtatása

Indítsa el mind a host, mind a plugin alkalmazást az `npm start` parancs futtatásával a megfelelő könyvtárakban.

Navigáljon a `http://localhost:3000` címre a böngészőjében. Látnia kell a host alkalmazást a dinamikusan betöltött plugin komponenssel.

Fejlett Funkciók és Megfontolások

Verziókezelés és Visszaállítás

A Module Federation támogatja a verziókezelést, lehetővé téve a pluginek különböző verzióinak kezelését. A host `remotes` konfigurációjában megadhat verziókorlátokat. Például:

            remotes: {
  'plugin': 'Plugin@http://localhost:3001/remoteEntry.js@1.0.0',
}
            

              
                Copy
              
            
          

Ez arra utasítja a hostot, hogy a plugin 1.0.0-s verzióját használja. Ha egy újabb verzió elérhető, a host továbbra is a megadott verziót fogja használni, amíg explicit módon nem frissítik. A robusztus verziókezelés implementálása kulcsfontosságú a törést okozó változások megelőzése és az alkalmazás stabilitásának biztosítása érdekében.

Biztonsági Megfontolások

A Module Federation használatakor a biztonság elsődleges fontosságú. Vegye figyelembe a következőket:

• Hitelesítés és Jogosultságkezelés: Implementáljon megfelelő hitelesítési és jogosultságkezelési mechanizmusokat annak biztosítására, hogy csak jogosult felhasználók férhessenek hozzá és használhassák a plugineket.
• Kódintegritás: Ellenőrizze a távoli modulok integritását, hogy megakadályozza a rosszindulatú kód bejuttatását az alkalmazásba. Fontolja meg a Content Security Policy (CSP) használatát annak korlátozására, hogy az alkalmazás milyen forrásokból tölthet be erőforrásokat.
• Függőségkezelés: Gondosan kezelje mind a host, mind a remote konténerek függőségeit a sebezhetőségek elkerülése érdekében. Rendszeresen frissítse a függőségeket a legújabb verziókra.
• Bemeneti Adatok Validálása: Validáljon minden adatot, amely a távoli modulokból érkezik, hogy megelőzze az injekciós támadásokat.
• CORS (Cross-Origin Resource Sharing): Konfigurálja helyesen a CORS-t, hogy a host alkalmazás hozzáférhessen a plugin alkalmazás távoli belépési fájljához.

Plugin Felfedezés és Kezelés

Komplexebb plugin rendszerek esetén szükség lehet egy mechanizmusra a pluginek felfedezésére és kezelésére. Ezt egy plugin regisztrációs adatbázissal vagy egy felfedezési szolgáltatással lehet elérni. Egy központi regisztrációs adatbázis tárolhat információkat az elérhető pluginekről, beleértve azok helyét, verzióját és függőségeit. A host alkalmazás ezután lekérdezheti a regisztrációs adatbázist a megfelelő pluginek megkereséséhez és betöltéséhez.

Fontolja meg ezeket a megközelítéseket:

• Központosított Konfiguráció: Tárolja a plugin URL-eket egy központi konfigurációs fájlban (pl. egy JSON fájlban), amelyet a host alkalmazás futásidőben olvas be. Ez lehetővé teszi a pluginek egyszerű hozzáadását, eltávolítását vagy frissítését anélkül, hogy a host alkalmazást újra kellene telepíteni.
• API-alapú Felfedezés: Hozzon létre egy API végpontot, amely visszaadja az elérhető pluginek listáját. A host alkalmazás ezután lekérheti ezt a listát, és dinamikusan betöltheti a plugineket.
• Eseményvezérelt Architektúra: Használjon eseménybuszt vagy üzenetsort, hogy értesítse a host alkalmazást, amikor új pluginek válnak elérhetővé. Ez lehetővé teszi az aszinkron plugin felfedezést és betöltést.

Dinamikus Konfiguráció és Plugin Aktiválás

A felhasználók számára a pluginek dinamikus konfigurálásának és aktiválásának lehetővé tétele egy erőteljes funkció. Ehhez szükség van egy mechanizmusra a plugin konfigurációk tárolására és kezelésére. Használhat adatbázist, konfigurációs fájlt vagy felhőalapú konfigurációs szolgáltatást a plugin beállítások tárolására. A host alkalmazás ezután futásidőben beolvashatja ezeket a beállításokat, és ennek megfelelően aktiválhatja a plugineket. Fontolja meg egy felhasználói felület biztosítását a plugin konfigurációk kezeléséhez.

Aszinkron Műveletek és Hibakezelés Kezelése

Dinamikusan betöltött pluginekkel való munka során elengedhetetlen az aszinkron műveletek és hibák elegáns kezelése. Használjon `async/await`-et vagy Promise-okat az aszinkron kód kezelésére. Implementáljon megfelelő hibakezelést a plugin betöltése vagy végrehajtása során fellépő hibák elkapására és naplózására. Adjon informatív hibaüzeneteket a felhasználónak. Fontolja meg egy központosított hibanaplózási szolgáltatás használatát a hibák követésére az összes pluginen keresztül.

Kód Felosztás és Teljesítményoptimalizálás

A teljesítmény optimalizálása érdekében használjon kód felosztást (code splitting) az alkalmazás és a pluginek kisebb darabokra bontásához. Ez lehetővé teszi a böngésző számára, hogy csak azt a kódot töltse le, amely egy adott oldalhoz vagy funkcióhoz szükséges. A Webpack beépített támogatást nyújt a kód felosztáshoz. Fontolja meg a lusta betöltés (lazy loading) használatát a pluginek csak akkor történő betöltéséhez, amikor szükség van rájuk. Minifikálja és tömörítse a kódot a fájlméret csökkentése érdekében.

Tesztelés és Folyamatos Integráció

Alaposan tesztelje a plugin rendszerét, hogy biztosítsa annak helyes működését. Írjon egységteszteket, integrációs teszteket és végponttól végpontig terjedő teszteket. Használjon folyamatos integrációs (CI) rendszert a tesztek automatikus futtatásához, amikor a kód megváltozik. Implementáljon folyamatos szállítási (CD) folyamatot az alkalmazás és a pluginek telepítésének automatizálásához.

Valós Példák és Felhasználási Esetek

A Module Federationt számos valós alkalmazásban használják, többek között:

• E-kereskedelmi Platformok: Termékajánlások, fizetési átjárók és szállítási szolgáltatók dinamikus betöltése. Például egy globális e-kereskedelmi platform a Module Federation segítségével integrálhat különböző fizetési szolgáltatókat az ügyfél tartózkodási helye alapján. Észak-Amerikában betölthet egy plugint a Stripe-hoz, míg Európában a PayPalhoz vagy a Klarnához.
• Tartalomkezelő Rendszerek (CMS): Lehetővé teszi a felhasználók számára pluginek telepítését és aktiválását a CMS funkcionalitásának bővítésére. Egy CMS lehetővé teheti a felhasználók számára, hogy plugineket telepítsenek SEO optimalizáláshoz, közösségi média integrációhoz vagy tartalom analitikához.
• Irányítópultok és Analitikai Platformok: Különböző widgetek és vizualizációk dinamikus betöltése. Egy globális analitikai platform betölthet plugineket különböző adatforrásokhoz, mint például a Google Analytics, az Adobe Analytics vagy a Salesforce.
• Microfrontend Architektúrák: Nagyméretű webalkalmazások építése függetlenül telepíthető microfrontendek gyűjteményeként. Egy nagyvállalat a Module Federation segítségével építheti fel webalkalmazását microfrontendek gyűjteményeként, amelyek mindegyike egy adott üzleti funkcióért felelős, mint például a fiókkezelés, a termékkatalógus vagy a rendelésfeldolgozás.
• Dizájn Rendszerek: UI komponensek és dizájn tokenek megosztása több alkalmazás között. Egy több márkával rendelkező globális szervezet a Module Federation segítségével oszthat meg egy közös dizájn rendszert az összes alkalmazása között, biztosítva a következetességet és csökkentve a fejlesztési ráfordítást.

Bevált Gyakorlatok Dinamikus Plugin Rendszerek Építéséhez Module Federationnel

Íme néhány bevált gyakorlat, amelyet érdemes szem előtt tartani dinamikus plugin rendszerek építésekor a Module Federationnel:

• Tartsa a Plugineket Kicsinek és Fókuszáltnak: Minden plugin egy adott funkcionalitásért legyen felelős. Ez megkönnyíti a pluginek karbantartását és frissítését.
• Definiáljon Világos Plugin Interfészeket: Definiáljon világos interfészeket arra, hogy a pluginek hogyan lépnek kapcsolatba a host alkalmazással. Ez biztosítja, hogy a pluginek kompatibilisek legyenek a hosttal, és megelőzi a törést okozó változásokat.
• Használjon Szemantikus Verziókezelést: Használjon szemantikus verziókezelést a pluginek verzióinak kezelésére. Ez megkönnyíti a változások követését és a kompatibilitás biztosítását.
• Biztosítson Dokumentációt: Biztosítson világos és tömör dokumentációt a pluginekhez. Ez segít a felhasználóknak megérteni, hogyan kell telepíteni, konfigurálni és használni a plugineket.
• Implementáljon Biztonsági Bevált Gyakorlatokat: Kövesse a biztonsági bevált gyakorlatokat az alkalmazás és a pluginek sebezhetőségek elleni védelme érdekében.
• Figyelje a Plugin Teljesítményét: Figyelje a pluginek teljesítményét a szűk keresztmetszetek azonosítása érdekében. Optimalizálja a kódot a teljesítmény javítása érdekében.
• Automatizálja a Telepítést: Automatizálja az alkalmazás és a pluginek telepítését. Ez csökkenti a hibák kockázatát és biztosítja, hogy a frissítések gyorsan települjenek.
• Használjon Következetes Kódolási Stílust: Kényszerítsen ki egy következetes kódolási stílust az összes pluginen. Ez megkönnyíti a kód olvasását és karbantartását.
• Írjon Egységteszteket: Írjon egységteszteket a pluginekhez, hogy biztosítsa azok helyes működését.
• Használjon Lintert: Használjon lintert a kód automatikus hibakereséséhez.

Következtetés

A JavaScript Module Federation egy erőteljes és rugalmas mechanizmust biztosít dinamikus plugin rendszerek építéséhez. A Module Federation kihasználásával moduláris, skálázható és karbantartható alkalmazásokat hozhat létre, amelyek képesek alkalmazkodni a változó követelményekhez. Az ebben a cikkben felvázolt bevált gyakorlatok követésével robusztus és biztonságos plugin rendszereket építhet, amelyek megfelelnek szervezete igényeinek.

Ez a technológia különösen értékes nemzetközi kontextusban, lehetővé téve a vállalkozások számára, hogy szoftverajánlataikat specifikus régiókra vagy ügyfélszegmensekre szabják anélkül, hogy teljesen különálló alkalmazásokat kellene telepíteniük. A helyi fizetési átjárók integrálásától a régióspecifikus tartalom szolgáltatásáig a Module Federation egy személyre szabottabb és hatékonyabb globális felhasználói élményt tesz lehetővé.